<template>
    <div>
        <h2 v-if="folderInfo.length">{{ folderInfo[0].title }}</h2>
        <el-tree :data="folderInfo" default-expand-all node-key="id">
            <template #default="{ node, data }">
                <div v-if="data.resource_type === 'folder'" class="a-box" :class="`${data.resource_type === 'folder' ? 'folder' : data.file_type}-box`">
                    <el-icon><component :is="data.resource_type === 'folder' ? typeMap['folder'] : typeMap[data.file_type]" /></el-icon>
                    <span class="tit">{{ data.title }}</span>
                </div>
                <a :href="data.file_url" v-else class="a-box" :class="`${data.file_type}-box`">
                    <el-icon><component :is="data.resource_type === 'folder' ? typeMap['folder'] : typeMap[data.file_type] || 'QuestionFilled'" /></el-icon>
                    <span class="tit">{{ data.title }}</span>
                </a>
            </template>
        </el-tree>
        <el-button color="#F06423" @click="downloadHandle" :loading="downloadLoading">{{ $t('mod.folder.view.btn_text') }}</el-button>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'

import ResourceService from '@/api/resource'
import type { FolderInfo } from '@/types/resource'

import { createDownloadA } from '@/utils/global'

const route = useRoute()
const folderId = computed(() => Number(route.params.folderId))
const folderInfo = ref<FolderInfo[]>([])
const loading = ref(false)
const downloadLoading = ref(false)
function getFolderInfo() {
    loading.value = true
    ResourceService.folderInfo(folderId.value)
        .then(res => {
            folderInfo.value = [res] // 转换数据
        })
        .finally(() => {
            loading.value = false
        })
}
const typeMap: { [key: string]: string } = {
    image: 'Picture',
    video: 'VideoPlay',
    audio: 'Mic',
    pdf: 'Document',
    word: 'Tickets',
    excel: 'PieChart',
    ppt: 'DataAnalysis',
    txt: 'Memo',
    zip: 'Box',
    folder: 'Folder',
    other: 'QuestionFilled',
}
const downloadHandle = () => {
    downloadLoading.value = true
    ResourceService.downloadFolder(folderId.value)
        .then(res => {
            createDownloadA(res, folderInfo.value[0].title)
        })
        .finally(() => {
            downloadLoading.value = false
        })
}

onMounted(() => {
    getFolderInfo()
})
</script>

<style lang="less" scoped>
h2 {
    margin-bottom: 30px;
    font-size: 30px;
    font-weight: normal;
    line-height: 1.2;
    color: #000;
}

.el-button {
    margin-top: 30px;
}

.a-box {
    display: flex;
    align-items: center;
    gap: 10px;

    .el-icon {
        color: #b5b5b5;
    }

    .tit {
        color: #e63946;
    }

    &:hover {
        .tit {
            color: #242424;
        }
    }

    &.image-box {
        .el-icon {
            color: #8688cb;
        }
    }
    &.video-box {
        .el-icon {
            color: #652e2e;
        }
    }
    &.audio-box {
        .el-icon {
            color: #e5fafc;
        }
    }
    &.pdf-box {
        .el-icon {
            color: #eb2f3b;
        }
    }
    &.word-box {
        .el-icon {
            color: #1d70f5;
        }
    }
    &.excel-box {
        .el-icon {
            color: #069e61;
        }
    }
    &.ppt-box {
        .el-icon {
            color: #f5670f;
        }
    }
    &.zip-box {
        .el-icon {
            color: #f4b10a;
        }
    }
    &.folder-box {
        .el-icon {
            color: #ffd152;
        }
    }
}
</style>
